<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
         #home {
            height: 500px;
            background-color: red;
        }


         #profile {
             height: 500px;
             background-color: blue;
         }


         ul {
             display: block;
             width: 20%;
         }
         div.tab-content {
             display: inline-block;
             width: 80%;
         }
    </style>
</head>
<body>


    <ul class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">首页</a></li>
        <li><a href="#profile" data-toggle="tab">最新</a></li>
        <li><a href="#message" data-toggle="tab">热门</a></li>
        <li><a href="#settings" data-toggle="tab">排行</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="home">
            <p> 我是首页</p>
        </div>
        <div class="tab-pane" id="profile">
            <p> 我是最新 </p>
        </div>
        <div class="tab-pane" id="message">
            <p>我是热门</p>
        </div>
        <div class="tab-pane" id="settings">
            <p>我是排行</p>
        </div>
    </div>



</body>
</html>